<!--
 * @Author: hu_binbin
 * @Date: 2021-08-23 15:56:39
 * @LastEditTime: 2021-08-23 21:27:15
 * @Description: 操作票-编辑
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" @click="$pageBack"/>
			</template>
		</Theader>
        <div style="overflow-y: auto;height: calc(100% - 7rem);padding-bottom: 3rem; margin-top: 3.5rem;">
            <div>
                <van-collapse class="collapse" v-model="activeNames">
                    <van-collapse-item name="1">
                      <template slot="title">
                        <div class="col-title">
                            <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                            <span style="margin-left: 0.4rem;">操作票基本信息</span>
                        </div>
                      </template>
                        <div class="lable-list">
                            <van-field 
                                label="单位"  
                                readonly 
                                required
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="变电站"  
                                readonly 
                                is-link
                                @click="showSub=true"
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="操作票编号"  
                                readonly 
                                required
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                        </div>
                    </van-collapse-item>
                    <van-collapse-item name="2">
                        <template slot="title">
                            <div class="col-title">
                                <van-image :src="icon.iconTitle" width="20" height="20"></van-image>
                                <span style="margin-left: 0.4rem;">调度令信息</span>
                            </div>
                        </template>
                          <div class="lable-list">
                                <van-field 
                                    label="预发时间"  
                                    readonly 
                                    :border="false"
                                    v-model="taskDetail.planTime"
                                >
                                    <template slot="right-icon">
                                        <van-image style="position: relative;top: 0.2rem;"
                                        @click="isDatePicker=true"  width="24" height="24" :src="icon.iconDate"/>
                                    </template>
                                </van-field>
                                <van-cell>
                                    <template slot="title">
                                        <div>
                                            <span><font>地调</font>字</span>
                                            <span><font>3862</font>号</span>
                                        </div>
                                    </template>
                                </van-cell>
                                <van-field 
                                    label="预发调度员"  
                                    readonly 
                                    is-link
                                    click="showPersonBtn"
                                    :border="false"
                                    v-model="taskDetail.person"
                                />
                                <van-field 
                                    label="接受人"  
                                    readonly 
                                    is-link
                                    :border="false"
                                    v-model="taskDetail.substationName"
                                />
                          </div>
                    </van-collapse-item>
                    <van-collapse-item name="3">
                        <template slot="title">
                            <div class="col-title">
                                <div style="height: 1rem;background: #1FB69F;width: 3px;"></div>
                                <span style="margin-left: 0.4rem;">操作任务</span>
                                <span style="margin-left: 0.4rem;">{{'共' + operTask.length + '项'}}</span>
                            </div>
                        </template>
                        <van-cell v-for="(item,index) in operTask" :key="index" :title="item.name">
                            <template slot='right-icon'>
                                <van-image width="20" height="20" :src="icon.delete"></van-image>
                            </template>
                        </van-cell>
                        <van-cell title="添加操作任务">
                            <template slot='icon'>
                                <van-image width="20" height="20" :src="icon.add"></van-image>
                            </template>
                        </van-cell>
                    </van-collapse-item>
                    <van-collapse-item name="4">
                        <template slot="title">
                            <div class="col-title">
                                <div style="height: 1rem;background: #1FB69F;width: 3px;"></div>
                                <span style="margin-left: 0.4rem;">操作项目</span>
                                <span style="margin-left: 0.4rem;">{{'共' + operTask.length + '项'}}</span>
                            </div>
                        </template>
                        <van-cell v-for="(item,index) in operTask" :key="index" :title="item.name">
                            <template slot='right-icon'>
                                <van-image width="20" height="20" :src="icon.delete"></van-image>
                            </template>
                        </van-cell>
                        <van-cell title="添加操作项目">
                            <template slot='icon'>
                                <van-image width="20" height="20" :src="icon.add"></van-image>
                            </template>
                        </van-cell>
                    </van-collapse-item>
                    <van-collapse-item name="5">
                        <template slot="title">
                            <div class="col-title">
                                <div style="height: 1rem;background: #1FB69F;width: 3px;"></div>
                                <span style="color:red;margin-left: 5px;">*</span>
                                <span style="margin-left: 0.4rem;">审核人签名</span>
                                <span style="margin-left: 0.4rem;">{{'共' + operTask.length + '项'}}</span>
                            </div>
                        </template>
                        <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
                            <van-button style="width: 20%;" v-for="(item,index) in personList" icon="records" :key="index" color="#1FB69F" size="small" type="primary">{{item.name}}</van-button>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>
        </div>
        
        <div class="bot-btn">
            <van-button class="btn-i" size="small" plain color="#2ABAA3" type="primary">保存</van-button>
            <van-button class="btn-i" size="small" @click="submit" color="#2ABAA3" type="primary">提交审核</van-button>
        </div>
        <van-popup
		@close="showSub=false"
		v-model="showSub"
		closeable
		close-icon-position="top-left"
		position="right"
		:style="{ width: '80%',height:'100%'}"
		>
			<SelectSubstation></SelectSubstation>
        </van-popup>
        <!-- 时间类型选择器 -->
		<van-popup round close-on-click-overlay v-model="isDatePicker" position="bottom" @close="isDatePicker=false">
			<van-datetime-picker v-model="currentDate" title="选择时间" @confirm="onConfirm" 
			:min-date="minDate"
			:formatter="formatter"
  			:max-date="maxDate"
			@cancel="isDatePicker=false" type="datetime">
			</van-datetime-picker>
        </van-popup>
        
        <van-popup
		@close="showPerson=false"
		v-model="showPerson"
		closeable
		close-icon-position="top-left"
		position="right"
		:style="{ width: '100%',height:'100%'}"
		>
			<SelectTeamPeople></SelectTeamPeople>
        </van-popup>
	</article>
</template>
<script>
    import Theader from "../component/header"
    import SelectSubstation from "../component/SelectSubstation"
    import SelectTeamPeople from "../component/SelectTeamPeople"
    import Util from "@/utils/util"
	export default {
		name: "editTicket",
		components:{
            Theader,
            SelectSubstation,
            SelectTeamPeople
		},
		data() {
			return {
                active: 0,
                title: "变电倒闸操作票编制",
                showSub:false,
                isDatePicker:false,
                currentDate:new Date(),//选择的日期
                minDate: new Date(new Date().getFullYear()-2,new Date().getMonth()+1,new Date().getDay()),
                maxDate: new Date(new Date().getFullYear()+2,new Date().getMonth()+1,new Date().getDay()),
                showPerson:false,
                activeNames:["1"],
                itemNames:["1"],
                personList:[
                    {
                        name: "张三",
                        id:'22'
                    }
                ],
                operTask:[
                    {
                        name:"1.10kv中邦10号变电站:将10kv分段I170开关由冷备用改为运行（合换）2.10kv中邦10号变电站:将10kv分段I170开关由冷备用改为运行（合换）",
                        id:"22"
                    },
                    {
                        name:"1.10kv中邦10号变电站:将10kv分段I170开关由冷备用改为运行（合换）2.10kv中邦10号变电站:将10kv分段I170开关由冷备用改为运行（合换）",
                        id:"12"
                    },
                    {
                        name:"1.10kv中邦10号变电站:将10kv分段I170开关由冷备用改为运行（合换）2.10kv中邦10号变电站:将10kv分段I170开关由冷备用改为运行（合换）",
                        id:"32"
                    },
                ],
                taskDetail: {
                    substationName:"东善桥变",
                    voltageLevel:"500Kv",
                    patrolTypeName:"全面巡视",
                    cycleTime:"2月",
                    fristTime:"2021/07/07 18:30:00",
                    team:"变电运维一班",
                    tourWay:"人工巡视",
                    planTime:"2021/07/07 18:30:00",
                    nextTime:"2021/07/07 18:30:00",
                    require:"的撒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",
                    remark:"1.10kv中邦10号变电站:将10kv分段I170开关由冷备用改为运行（合换）2.10kv中邦10号变电站:将10kv分段I170开关由冷备用改为运行（合换）",
                },
                icon: {
                    iconTitle: require("../../../../assets/tour/icon-title.png"),
                    rfid: require("../../../../assets/tour/icon-rfid.png"),
                    scan:require('../../../../assets/tour/icon-scan.png'),
                    deleteRed:require('../../../../assets/tour/delet-red.png'),
                    iconDate: require("../../../../assets/tour/icon-date.png"),
                    delete: require("../../../../assets/tour/icon-del.png"),
                    add: require("../../../../assets/tour/icon-blank-add.png"),
                    
                },
                activeNames: ['1'],
                radio:1,
			}
		},
		computed: {

		},
		methods: {
            //rifid 
            rfidBtn() {

            },
            //扫描二维码
            scanBtn() {

            },
            showPersonBtn(name) {
                this.showPerson = true;
            },
            //日期格式
			formatter(type, val) {
				if (type === 'year') {
					return val + '年';
				}
				if (type === 'month') {
					return val + '月';
				}
				if (type === 'day') {
					return val + '日';
				}
				if (type === 'hour') {
					return val + '时';
				}
				if (type === 'minute') {
					return val + '分';
				}
				return val;
            },
            //时间确认按钮
            onConfirm(val){
				this.isDatePicker = false;
            	this.taskDetail.planTime = Util.DateUtil.getFormatDateByLong(val,'yyyy-MM-dd hh:mm')
            },
            submit() {
                this.$router.push({
                    name:"revicedCommand"
                })
            }
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F0F0F0 ;
    }

    .lable-list /deep/ .van-cell{
        padding: 10px 10px;
    }
    .lable-list /deep/ .van-field__label{
        width: 7rem;
    }
    .lable-list /deep/ .van-field__control{
        text-align: right;
    }

    .label-ll /deep/ .van-field__label{
        width: 7rem;
    }
    .label-ll /deep/ .van-field__control{
        text-align: right;
    }
    
    .defe-des{
        color:#666;margin-top: 15px;
        font-size:0.8rem;
    }
    .textarea-content /deep/ .van-cell{
        padding: 10px 16px;
    }
    .textarea-content /deep/ .van-field__control{
        text-align: left;
    }
    .textarea-content{
        color:#333;
        font-size:0.875rem;
		border: 1px solid #E2E2E2;color:#999;
        padding-bottom: 1.5rem;
    }
    .textarea-content /deep/ .van-field__right-icon{
        position: absolute;
        bottom: -0.2rem;
        right: 0.5rem;
    }
    .imgSize{
        margin: 0 1rem;
    }
    .selRadio  /deep/ .van-cell__title{
        width: 80px;
        flex: inherit;
        color:#666;
    }
    .selRadio  /deep/ .van-cell__value{
        display: flex;
        justify-content:flex-end;
    }

    /deep/ .van-collapse-item{
        margin: 0.7rem;
        border-radius: 0.7rem;
    }
    /deep/ .van-cell--clickable{
        border-radius: 0.7rem 0.7rem 0 0;
    }
    /deep/ .van-collapse-item__content{
        border-radius: 0rem 0rem 0.7rem 0.7rem;
    }
    .col-title{
        display: flex;
        align-items: center;
    }
    .col-col{
        margin: 0 1rem;
        padding: 1rem 0;
    }
    
    .bot-btn{
        position: fixed;
        bottom: 0;
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 1rem 0;
        font-size: 0.9rem;
    }
    .bot-btn .btn-i{
        width: 45%;
        height: 40px;
    }
    /deep/ .van-cell--required::before {
        left:0px;
    }
    font{
        margin: 0 0.7rem 0 0;
    }
    /deep/ .van-cell{
        align-items: center;
    }
</style>


